<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点</title>
</head>
<body>
<!--cloneNode复制节点-->
<!--原列表-->
<ul id="first">
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>
<!--新列表-->
<ul id="second"></ul>
<button id="btn">点击</button>
<script>
  var btn=document.getElementById('btn');
  btn.onclick=function (){
    console.log('clicked');
    //书本写法
    // var item=document.getElementById('first').firstChild;
    // var cloneItem=item.cloneNode(true);
    var item=document.getElementById('first');
    //获取列表第一个子节点并复制
    var cloneItem=item.childNodes[0].cloneNode(true);
    document.getElementById('second').appendChild(cloneItem);
  }
  // //定义Clicked方法
  // function Clicked(){
  //   console.log(this+'clicked')
  //   // var fList=document.getElementById('first');
  //   // var text=fList.firstChild;
  //   //Line 22,23 >>>合并为下面
  //   var copy=document.getElementById('first').firstChild;
  //   console.log(copy);
  //   //复制节点
  //   var clone=copy.cloneNode(true);
  //   document.getElementById('second').appendChild(clone);
  // }
  // //获取原列表下所有li
  // var first=document.querySelectorAll('#first li');
  // //为每个li加上点击事件
  // for(var i=0;i<first.length;i++){
  //   first[i].onclick=Clicked;
  // }
</script>
</body>
</html>